<template>
	<view class="">
		<view class="base-nav flex a-c">
			<view class="f1 flex a-c search-box">
				<image src="/static/img/search-gray.png" mode="widthFix" class="icon-25" />
				<input type="text" v-model="search" placeholder="搜索" placeholder-class="p-c" @confirm="navAct=0;isSearch=true;getBaseList();">
			</view>
			<view class="flex a-c" v-if="isSearch" style="margin-left: 40rpx;">
				<view v-for="(v,i) in navList" :key="i" :class="navAct === v.type?'nav-avt':'nav'" @click="checkNav(v.type)">{{ v.name }}</view>
			</view>
			<!-- <view class="search-btn">
				<view class="" @click="handleSearch(1)">地点</view>
				<view class="" @click="handleSearch(2)">主题</view>
			</view> -->
		</view>
		
		<view class="">
			<view class="base-card" v-for="(v,i) in list" :key="i" @click="$to(`/pages/index/base_detail?id=${v.id}`)">
				<view class="base-card_info flex a-c">
					<view class="f1">
						<view class="base-card_name fw-b">{{ v.title }}</view>
						<view class="base-card_synopsis">{{ v.keyword }}</view>
						<view class="flex a-c wrap">
							<view v-for="(v2,i2) in v.labelList" :key="i2" class="tag">{{ v2 }}</view>
						</view>
					</view>
					<image :src="v.cover" mode="aspectFill" class="icon-200" />
				</view>
				<view class="flex a-c">
					<image src="/static/home/home-locate.png" mode="widthFix" class="icon-18" />
					{{ v.address }}
				</view>
			</view>
			<block v-if="!list || !list.length">
				<view class="noMore">{{ navAct == 1?'暂无研学地点':'暂无研学主题'}}</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [
					{
						name: '研学地点',
						type: 1
					},
					{
						name: '研学主题',
						type: 2
					}
				],
				navAct: 0,
				list: [],
				page: 1,
				limit: 10,
				search: '',
				lastPage: 1,
				isSearch: false,
			}
		},
		onLoad() {
			this.getBaseList()
		},
		onReachBottom() {
			if(this.page<this.lastPage) {
				this.page++;
				this.getBaseList();
			}
		},
		methods: {
			handleSearch(v){
				this.navAct = v;
				this.page = 1;
				this.list=[];
				this.getBaseList();
			},
			checkNav(i) {
				this.navAct = i;
				this.page = 1;
				this.getBaseList();
			},
			async getBaseList() {
				let res = await this.$api.get('ebBase/list', {
					type: this.navAct,
					page: this.page,
					limit: this.limit,
					search: this.search
				});
				if(res.code == 200) {
					
					res.data.list.forEach(v => {
						if(v.label) {
							v.labelList = v.label.split(',')
						}else {
							v.labelList = []
						}
					})
					if(this.page == 1) {
						this.list = res.data.list || [];
						this.lastPage = res.data.totalPage || 1;
					}else {
						this.list.push(...res.data.list);
					}
				}
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
	.p-c {
		color: #999;
	}
</style>

<style lang="scss" scoped>
	.base-nav {
		background-color: #FFF;
		padding: 16rpx 27rpx;
		font-size: 27rpx;
		.nav {
			// margin-right: 80rpx;
			margin-right: 40rpx;
		}
		.nav-avt {
			// margin-right: 80rpx;
			margin-right: 40rpx;
			font-size: 29rpx;
			font-weight: bold;
			position: relative;
			z-index: 5;
		}
		.nav-avt::before {
			height: 8rpx;
			width: 100%;
			background-image: linear-gradient(to right,#3DD8FF, #589AFF);
			position: absolute;
			display: block;
			content: '';
			bottom: 0;
			left: 0;
			z-index: -1;
		}
		.icon-25 {
			width: 25rpx;
			height: 25rpx;
			margin-right: 10rpx;
		}
		.search-box {
			background-color: #F7F7F7;
			border-radius: 30rpx;
			font-size: 27rpx;
			padding: 0 25rpx;
			height: 60rpx;
			line-height: 60rpx;
			input {
				flex: 1;
				line-height: 60rpx;
				// width: 160rpx;
			}
		}

		.search-btn{
			display: flex;
			align-items: center;
			view{
				width: 80rpx;
				height: 40rpx;
				background-color: #2E80FE;
				border-radius: 6rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #FFF;
			}
			view:last-child{
				margin-left: 10rpx;
			}
		}
	}
	.base-card {
		margin: 20rpx 27rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		padding: 20rpx 27rpx;
		font-size: 24rpx;
		color: #999999;
		&_info {
			border-bottom: 1rpx dashed #F0F0F0;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
		}
		&_name {
			font-size: 29rpx;
			color: #1A1A1A;
		}
		&_synopsis {
			font-size: 21rpx;
			margin-bottom: 10rpx;
		}
		.icon-200 {
			width: 200rpx;
			height: 160rpx;
			border-radius: 16rpx;
			background-color: #F7F7F7;
		}
		.icon-18 {
			width: 18rpx;
			height: 24rpx;
			margin-right: 12rpx;
		}
	}
</style>
